<html>
	<head>
		<title>Wave 2D</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="../common/micromodal.css" />
		<link rel="stylesheet" type="text/css" href="../common/index.css" />
		<script src="../common/tweakpane-3.1.1.min.js"></script>
		<script src="../common/micromodal.min.js"></script>
		<script src="../common/canvas-capture.min.js"></script>
		<script src="../common/three.min.js"></script>
		<script src="../common/OrbitControls.js"></script>
		<script src="../../dist/gpu-io.min.js"></script>
	</head>
	<body>
		<div class="modal micromodal-slide" id="modal-1" aria-hidden="true">
			<div class="modal__overlay" tabindex="-1" data-micromodal-close>
			  <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
				<header class="modal__header">
				  <h2 class="modal__title" id="modal-1-title">
					2D Wave Equation - ThreeJS
				  </h2>
				  <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
				</header>
				<main class="modal__content" id="modal-1-content">
				  <p>
					This app simulates the <a href="https://en.wikipedia.org/wiki/Wave_equation">2D wave equation</a> and renders the resulting height field as a 3D mesh.
					Additionally, it simulates realtime <a href="https://en.wikipedia.org/wiki/Caustic_(optics)">caustics</a> formed by light shining through the 3D surface and renders the result as a texture (<a href="https://medium.com/@evanwallace/rendering-realtime-caustics-in-webgl-2a99a29a0b2c">method described in more detail by Evan Wallace</a>).
					All computations are performed in <a href="https://apps.amandaghassaei.com/gpu-io/examples/">gpu-io</a> and the results are passed to <a href="https://threejs.org/">threejs</a> without ever leaving the GPU.  Written by <a href="https://amandaghassaei.com/">Amanda Ghassaei</a>.
				  </p>
				  <p>
					Instructions: Drag to rotate, Pinch/Scroll to zoom.
					Adjust the wave propagation speed and the distance between the 3D surface and the caustics projection using the menu on the right.
					Press "v" to record a video.
				  </p>
				  <p>
					This page is part of a series of examples using <a href="https://apps.amandaghassaei.com/gpu-io/examples/">gpu-io</a>, a GPU-accelerated computing library for physics simulations and other mathematical calculations.
					Find the source code on <a id="sourceCode" href="https://github.com/amandaghassaei/gpu-io/tree/main/examples/wave2d">Github</a>.
				  </p>
				</main>
			  </div>
			</div>
		  </div>
	</body>
	<script src="./webgl1.js"></script>
	<script src="./index.js"></script>
	<script src="../common/wrapper.js"></script>
</html>